<template>
    <div class="">
        <div class="box p-6 mb-6">
            <h4>教学目标</h4>
            <div>
                <h5 class="bold m-4">知识与技能</h5>
                <div v-html="data.targetOne"></div>
                <h5 class="bold m-4">过程与方法</h5>
                <div v-html="data.targetTwo"></div>
                <h5 class="bold m-4">情感态度与价值观</h5>
                <div v-html="data.targetThree"></div>

            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>教学重点</h4>
            <div>
                <div v-html="data.focus"></div>
            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>教学难点</h4>
            <div>
                <div v-html="data.difficulty"></div>
            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>情景引入</h4>
            <div>
                <div v-html="data.flowOne"></div>
            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>思维构建</h4>
            <div>
                <div v-html="data.flowTwo"></div>
            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>创作实践</h4>
            <div>
                <div v-html="data.flowThree"></div>
            </div>
        </div>
        <div class="box p-6 mb-6">
            <h4>总结与思考</h4>
            <div>
                <div v-html="data.flowFour"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import bus from '@/utils/bus'
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}
const props = defineProps({
    data: {
        type: Object,
    }
})
// 启用监听
bus.on('open-course', openDialog);

// 在组件卸载之前移除监听
onBeforeUnmount(() => {
    bus.off('open-course', openDialog);
})
</script>